<template>
<view class="footer" :style="{'padding-bottom':systemInfo.safeAreaInsets.bottom+'px'}">
	<view class="fix-wrap nav" :style="{'padding-bottom':systemInfo.safeAreaInsets.bottom+'px'}">
		<navigator :url="item.url" open-type="reLaunch" hover-class="none" :class="['item',{'active':item.currentIndex==switchTab}]" v-for="(item,index) in navList" :key="index">
			<view class="icon">
				<image v-if="item.currentIndex==switchTab" :src="item.selectIcon" mode="widthFix"></image>
				<image v-else :src="item.icon" mode="widthFix"></image>
				<view v-if="item.count>0" class="count">{{item.count>99?'99+':item.count}}</view>
			</view>				
			<view class="name">{{item.name}}</view>
		</navigator> 
	</view>
</view>
</template>

<script> 
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,  
			systemInfo:uni.getSystemInfoSync(),
			navList:[
				{
					name:'菜园',
					currentIndex:1,
					icon:require('../static/images/index.png'),
					selectIcon:require('../static/images/index_active.png'),
					count: 0,
					url:'/pages/index/index'
				},
				{
					name:'智能',
					currentIndex:2,
					icon:require('../static/images/zn.png'),
					selectIcon:require('../static/images/zn_active.png'),
					count: 0,
					url:'/pages/zhineng/zhineng'
				},
				{
					name:'产品',
					currentIndex:3,
					icon:require('../static/images/cp.png'),
					selectIcon:require('../static/images/cp_active.png'),
					count: 0,
					url:'/pages/zhishiku/zhishiku'
				},
				{
					name:'我的',
					currentIndex:4,
					icon:require('../static/images/home.png'),
					selectIcon:require('../static/images/home_active.png'),
					count: 0,
					url:'/pages/home/home'
				} 
			]
		}
	},
	props:{
		switchTab:{
			type:Number
		} 
	},
	async onReady() {  
		 
	}, 
	async mounted() {
		 
		
	},
	methods:{
		 
	},
	computed: {
		 
	},
	
	watch:{
		 
	}
}
</script>

<style lang="less" scoped>
	/*
		自定义菜单栏
	*/
	 
	.footer{ 
		height: 50px;	
		.fix-wrap{ 
			position: fixed;
			left:0;
			bottom:0;
			z-index: 100;
			width: 100%;
			height: 50px;
			background: #fff;
			border-top:1rpx solid #eee;
		}
		.nav{
			height: 50px;
		}
	} 
	.nav{
		display: flex;
		justify-content: space-around;
		.item{
			width:1%;
			flex-grow: 1;
			text-align: center;
			color:#999;
			.name{
				font-size: 24rpx; 
			}
			.icon{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width:50rpx;
				height:50rpx; 
				margin:8rpx auto 0; 
				image{
					width:60%;
					height:60%; 
				}
				.iconfont{
					width:40rpx;
					height:40rpx;
					line-height: 40rpx;
					text-align: center;
				}
				.splot{
					position: absolute;
					right:-10rpx;
					top:-10rpx;
					z-index: 1;
					width:16rpx;
					height:16rpx;
					background: #f00;
					border-radius: 50%;
				}
				.count{
					position: absolute;
					left:28rpx;
					top:-5rpx;
					z-index: 1;
					min-width:14rpx;
					padding:0 8rpx;
					height:30rpx;
					line-height: 30rpx; 
					background: #f00;
					border-radius:38rpx;
					color:#fff;
					font-size: 22rpx;
				}
			}
		}
		.active{
			color:#00aa7f;
		}
	}
	 
</style>
